<template>
  <div class="menu">
    <a-row type="flex" justify="center">
      <a-col :span="18">
        <a-row type="flex" justify="space-between">
          <a-col :span="12">
            <a-row>
              <template v-for="item in leftMenuConfig" :key="item.path">
                <a-col>
                  <a-button type="text" @click="handleNavigate(item.path)" block>{{ item.title }}</a-button>
                </a-col>
              </template>
            </a-row>
          </a-col>
          <a-col :span="6" type="flex" justify="right">
            <a-row>
              <a-col :offset="12" :span="12">
                <a-dropdown>
                  <a class="ant-dropdown-link" @click.prevent>
                    <a-button type="text">{{ userInfo.username }}</a-button>
                    <DownOutlined/>
                  </a>
                  <template #overlay>
                    <a-menu>
                      <a-menu-item>
                        <a href="javascript:;" @click="handleOpenUserInfo">个人资料</a>
                      </a-menu-item>
                      <a-menu-item>
                        <a href="javascript:;" @click="handleLogout">注销</a>
                      </a-menu-item>
                    </a-menu>
                  </template>
                </a-dropdown>
              </a-col>
            </a-row>
          </a-col>
        </a-row>
      </a-col>
    </a-row>
  </div>
</template>

<script setup lang="ts">
import {DownOutlined} from '@ant-design/icons-vue';
import router from "@/router";
import useAccountStore from "@/store/accountModule";
import useGlobalStore from "@/store/globalModule";
import useAdminStore from "@/store/adminModule";

const globalStore = useGlobalStore()
const accountStore = useAccountStore()
const userInfo = accountStore.userInfo

const leftMenuConfig = [
  {
    title: "联通用户管理系统",
    path: "/"
  },
  {
    title: "部门管理",
    path: "/home"
  },
  {
    title: "用户管理",
    path: "/user"
  },
  {
    title: "靓号管理",
    path: "/pretty"
  },
  {
    title: "管理员模块",
    path: "/admin"
  },
  {
    title: "数据统计",
    path: "/visual-view"
  }
]

const handleNavigate = (path: string) => {
  router.push({
    path
  })
}

// 打开个人中心
const adminStore = useAdminStore()
const handleOpenUserInfo = () => {
  adminStore.requestAdminDetailAction({
    id: userInfo.id
  })
  globalStore.setPersonalCenterAction(true)
}

// 退出登录
const handleLogout = () => {
  accountStore.logoutAction()
}
</script>

<style lang="less" scoped>
.menu {
  height: 54px;
  background-color: #f2f2f2;
  line-height: 54px;
}
</style>
